import costSaving from "@/assets/image/icons/Cost Saving.svg";
import easyManagement from "@/assets/image/icons/Easy Management.svg";
import timeSaving from "@/assets/image/icons/Time Saving.svg";
import { ProCard } from "@ant-design/pro-components";
import "./index.less";

const benefitsData = [
  {
    icon: timeSaving,
    title: "Time Saving",
    content:
      "Spend less time searching for parking and more time on what matters.",
  },
  {
    icon: easyManagement,
    title: "Easy to Manage",
    content: "Easily manage your parking online in anytime and anywhere.",
  },
  {
    icon: costSaving,
    title: "Cost Savings",
    content: "Subsidised parking can help employees save on parking fees.",
  },
];

export default function Benefits() {
  return (
    <>
      <div className="benefits-content ">
        {/* <div className="backgroundImage" /> */}
        <h2 className="title">Benefits of Our Services</h2>
        <div className="benefits-details">
          {benefitsData.map((benefit, index) => (
            <ProCard key={index} hoverable bordered>
              <div className="benefits-element">
                <img
                  className="icon"
                  src={benefit.icon}
                  alt={`${benefit.title} icon`}
                />
                <h3 className="text">{benefit.title}</h3>
                <p className="text-content">{benefit.content}</p>
              </div>
            </ProCard>
          ))}
        </div>
      </div>
    </>
  );
}
